<template>
<div class="tc-center fl">
        <rx-center-title-swiper :data="title">
            <ul class="clearfix uiTab9 j_uiTab9">
                <li :class="{'uiTab9-active':subIndex == index}" @click="subSwitch(index)" v-for="(item, index) of title" :key="index">{{item}}</li>
            </ul>
        </rx-center-title-swiper>
    <div id="j-tc-center-content">
        <!-- 状态的命名为 state -->
        <div class="uiTab9Con" v-if="subIndex == 0">
            <rx-state></rx-state>
        </div>
        <!-- 项目的命名为 item -->
        <div class="uiTab9Con" v-if="subIndex == 1">
            <rx-item></rx-item>
        </div>
        <!-- 结果 -->
        <div class="uiTab9Con" v-if="subIndex == 2">
            <rx-result></rx-result>
        </div>
        <!-- 过程 -->
        <div class="uiTab9Con" v-if="subIndex == 3">
            <rx-process></rx-process>
        </div>
        <!-- 投诉 -->
        <div class="uiTab9Con" v-if="subIndex == 4">
            <rx-complaint></rx-complaint>
        </div>
        <!-- 成本 -->
        <div class="uiTab9Con" v-if="subIndex == 5">
            <rx-cost></rx-cost>
        </div>
        <!-- 财务 -->
        <div class="uiTab9Con" v-if="subIndex == 6">
            <rx-finance></rx-finance>
        </div>
        <!-- 人事 -->
        <div class="uiTab9Con" v-if="subIndex == 7">
            <rx-personnel></rx-personnel>
        </div>
        <!-- 会议 -->
        <div class="uiTab9Con" v-if="subIndex == 8">
            <rx-meeting></rx-meeting>
        </div>
         <!-- 订单 -->
        <div class="uiTab9Con" v-if="subIndex == 9">
            <rx-order></rx-order>
        </div>
         <!-- 管理 -->
        <div class="uiTab9Con" v-if="subIndex == 10">
            <rx-manage></rx-manage>
        </div>
        <!-- 绩效 -->
        <div class="uiTab9Con" v-if="subIndex == 11">
            <rx-achievements></rx-achievements>
        </div>
        <!-- 分红 -->
        <div class="uiTab9Con" v-if="subIndex == 12">
            <rx-bonus></rx-bonus>
        </div>
    </div>
</div>
</template>
<style scoped>
.uiTab9 li { min-width: 39px;}
</style>
<script>
import { mapGetters } from 'vuex'
// 注: 所有的大组件已 rx-xxx 命名, 不要使用此示例文件命名，可保留作为参考
import rxState from './state' // 状态
import rxItem from './item' // 项目
import rxResult from './result' // 结果
import rxProcess from './process' // 过程
import rxComplaint from './complaint' // 投诉
import rxCost from './cost' // 成本
import rxFinance from './finance' // 财务
import rxPersonnel from './personnel' // 人事
import rxMeeting from './meeting' // 会议
import rxOrder from './order' // 订单
import rxManage from './manage' // 管理
import rxAchievements from './achievements' // 绩效
import rxBonus from './bonus' // 分红
export default {
    components: {
        rxState,
        rxItem,
        rxResult,
        rxProcess,
        rxComplaint,
        rxCost,
        rxFinance,
        rxPersonnel,
        rxMeeting,
        rxOrder,
        rxManage,
        rxAchievements,
        rxBonus
    },
    data () {
        return {
            title: ['状态', '项目', '结果', '过程', '投诉', '成本', '财务', '人事', '会议', '订单', '管理', '绩效', '分红'],
            subIndex: 1
        }
    },
    computed: {
        ...mapGetters(['leftInfo'])
    },
    methods: {
        subSwitch (index) {
            this.subIndex = index
            // 关闭弹窗
            this.$router.push(this.$route.matched[1].path)
        }
    }
}
</script>
